<template>
  <div>
    <el-table :data="data" :height="height" v-loading="data.length==0" highlight-current-row @row-dblclick="getSongId"
      style="width: 100%;font-size: large;font-family: 'YouYuan';">
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column prop="title" label="音乐" width="450">
        <template slot-scope="scope">
          <span>{{scope.row.title}}</span>
          <span v-if="scope.row.vip=='[VIP]'" style="color: #CD7F32;">{{scope.row.vip}}</span>
          <span v-if="scope.row.vip==4" style="color: red">[暂无版权]</span>
          <span v-if="scope.row.mvId!=0">
            <i class="el-icon-video-camera" @click="getMoveByMusicMvId(scope.row.mvId)"></i>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="歌手">
      </el-table-column>
      <el-table-column prop="al" label="专辑">
      </el-table-column>
      <el-table-column prop="time" label="时长">
      </el-table-column>
      <el-table-column prop="pop" label="热度">
        <template slot-scope="scope">
          <el-progress text-color="red" color="red" :percentage="scope.row.pop" :format="format"></el-progress>
        </template>

      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" fullscreen="true" @closed="closed">
      <video :src="mvUrl" style="width: 80%;height: 80%;margin-left: 10%;" v-if="showMv==1" controls></video>
    </el-dialog>

  </div>
</template>

<script>
  import move from "@/musicApi/apis/move";
  export default {
    name: "songTable",
    props: ["data", "height"],
    data() {
      return {
        mvUrl: '',
        showMv: 0,
        dialogVisible: false
      }
    },
    mounted() {
    },
    methods: {
      //获取所在行的歌曲信息
      async getSongId(row) {
        this.$store.commit('SET_Song_Id', row);
      },
      format(percentage) {
        return percentage >= 80 ? '热度' : '';
      },
      //获取歌曲对应的视频URL
      getMoveByMusicMvId(mvId) {
        move.getMvUrl(mvId).then(res => {
          this.dialogVisible = true
          this.showMv = 1
          this.mvUrl = res.data.data.url
        })
      },
      closed() {
        this.dialogVisible = false;
        this.showMv = 0
      }

    },

  }
</script>

<style scoped>
  .el-icon-video-camera {
    cursor: pointer;
    color: red;
    font-size: 1rem;
    padding-left: 15px;
  }

  /* 隐藏伪元素 */
  ::v-deep.el-table::before {
    display: none !important;
  }

  /* // 更改表头背景颜色 */
  ::v-deep.el-table thead tr>th {
    background-color: #FFDAB9;
  }

  /* // 更改表格每行背景颜色 */
  ::v-deep.el-table tbody tr>td {
    background-color: #FFEFD5;
  }

  /* // 设置鼠标经过时背景颜色 */
  ::v-deep.el-table tbody tr:hover>td {
    background-color: #FFFFF0 !important;
  }
</style>